<!-- <template>
    <div>
        <div class="scroll-list">
            <p>局部使用</p>
            <div class="scrollBox">
                <vue3-seamless-scroll :list="scrollListArr" class="scroll" v-if="scrollFlag" :step="0.5">
                    <div v-for="(item, index) in scrollListArr" :key="item.id">
                        <span>{{ item.description }}</span>
                    </div>
                </vue3-seamless-scroll>
            </div>
        </div>
    </div>
</template> -->
<template>
    <!-- <div class="scrollBox">
        <vue3-seamless-scroll :list="scrollListArr" class="scroll" v-if="scrollFlag" :step="0.5">
            <div v-for="(item, index) in scrollListArr" :key="item.id">
                <span>{{ item.description }}</span>
            </div>
        </vue3-seamless-scroll>
        <div>
            <p class="bg-red-300 flex justify-center items-center text-blue-100 my-5">试一试tailwindCss</p>
        </div>
    </div> -->
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { getScrollList } from "@/api/getList";
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
let scrollListArr = reactive<any>([]);
let scrollFlag = ref(false);
const getList = async () => {
    let res = await getScrollList();
    let data = res.data;
    if (data.code == 200) {
        scrollListArr = data.data;
        scrollFlag.value = true;
    }
};
getList();
</script>
<style lang="less">
.scrollBox {
    border: 2px solid #f42600;
    padding: 6px 0;
    width: 300px;
    margin: 0 auto;
    height: 190px;
}
.scroll {
    height: 180px;
    overflow: hidden;
    line-height: 38px;
}
</style>
